<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cell {
    background: #fff;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label{
    /*width: 130px;*/
    text-align: left;
  }

  .weui-select {
    height: auto;
    line-height: normal;
  }
  *{
    list-style:none;
  }
  /*body{*/

  /*}*/
  .weui-cell_select {
    padding: 10px 15px;
  }
  .weui-cells__title {
    text-align: left;
  }
  .hide {
    display: none;
  }
  #acts {
    font-size: 0;
  }
  #acts span {
    font-size: 14px;
  }
  input.time {
    border: none;
    font-size: 16px;
    padding-left: 10px;
  }
</style>
<template>
  <div class="oitem">
    <div class="weui-cells__title">货品明细{{itemNo + 1}}
      <p id="acts" style="float: right;color: #1aad19;" v-if="isLast">
        <span id="addItem" @click="addItem" style="padding-right: 5px;">添加</span>
        <span v-if="itemNo != 0">|</span>
        <span id="delItem" style="padding-left: 5px;" @click="delItem" v-if="itemNo != 0">删除</span>
      </p>
    </div>
    <div class="weui-cell weui-cell_select fir">
      <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input" type="hidden" :name="'pitems[' + itemNo + '].flag'" :value="currPro.flag">
        <input type="hidden" ref="productname" :name="'pitems[' + itemNo + '].productname'">
        <input type="hidden" v-if="benifitordeduct == 1 && (benefittype == 1 || benefittype == 2) || benifitordeduct == 2" :name="'pitems[' + itemNo + '].deductrate'" :value="discount">
        <select class="weui-select product" :name="'pitems[' + itemNo + '].productguid'" :id="'product' + itemNo" v-model="productid">
          <option value="" disabled>请选择</option>
          <option v-for="(item, index) in commonproducts" :value="item.productId">{{item.productName}}</option>
<!--          <option v-if="contract != ''" v-for="(item, index) in contractProducts" :key="item.pzguid" :value="item.pzguid">{{item.pzname}}</option>-->
<!--          <option v-if="contract == ''" v-for="(item, index) in products" :key="item.guid" :value="item.guid">{{item.productname}}</option>-->
        </select>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input specif" type="hidden" ref="spname" readonly :name="'pitems[' + itemNo + '].spname'" :value="currProduct.speName">
        <input class="weui-input" type="hidden" :name="'pitems[' + itemNo + '].spguid'" :value="currProduct.speId">
<!--        <select class="weui-select specif" id="spec" :name="'pitems[' + itemNo + '].spguid'" v-model="specid">-->
<!--          <option value="" disabled>请选择</option>-->
<!--          <option v-for="(item, index) in specs" :key="item.speId" :value="item.speId" >{{item.speName}}</option>-->
<!--        </select>-->
        <model-list-select :list="specs"
                           v-model="specid"
                           option-value="speId"
                           option-text="speName"
                           placeholder="请选择">
        </model-list-select>
      </div>
    </div>
    <div class="weui-cell">
<!--      <div class="weui-cell__hd"><label class="weui-label">单价<span>({{payUnit}})</span></label></div>-->
      <div class="weui-cell__hd"><label class="weui-label">单价</label></div>
      <div class="weui-cell__bd">
          <input class="weui-input price inlinput1" v-if="quitsrtype == 2 && prodpricestra == 1" type="number" readonly :name="'pitems[' + itemNo + '].price'" v-model="price">
          <input class="weui-input price inlinput1" v-else type="number" :name="'pitems[' + itemNo + '].price'" v-model="price" placeholder="请输入单价">
         <input class="weui-input inlinput2" type="text" readonly :value="packUnit(currProduct.unit, currency)">
      </div>
    </div>
    <template v-if="settletype == 1">
    <div class="weui-cell" v-if="benifitordeduct == 1 && (benefittype == 3 && contract != '')">
      <div class="weui-cell__hd"><label class="weui-label">赠送(%)</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input" type="text" :name="'pitems[' + itemNo + '].deductrate'" readonly :value="prices.concession">
      </div>
    </div>
    <div class="weui-cell" v-if="benifitordeduct == 1 && (benefittype == 3 && contract == '')">
      <div class="weui-cell__hd"><label class="weui-label">赠送(%)</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input" type="text" :name="'pitems[' + itemNo + '].deductrate'" readonly :value="prices.concession">
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">订单数量</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input orderpack" style="width: 80%;display: inline-block;" type="number" v-model="orderpack" :name="'pitems[' + itemNo + '].orderpack'" placeholder="需进行结算的数量">
        <input class="weui-input" style="width: 15%;display: inline-block;" type="text" readonly :name="'pitems[' + itemNo + '].unit'" :value="currProduct.unit">
      </div>
    </div>
</template>
    <div class="weui-cell" v-if="benifitordeduct == 1 && settletype == 1 && benefittype == 5 && paytype < 4">
      <div class="weui-cell__hd"><label class="weui-label">赠送数量</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input" style="width: 80%;display: inline-block;" type="number" v-model="handselcount" :name="'pitems[' + itemNo + '].handselcount'" placeholder="赠送，不结算">
        <input class="weui-input" style="width: 15%;display: inline-block;" type="text" readonly :value="currProduct.unit">
      </div>
    </div>
    <input v-if="benifitordeduct == 1 && settletype == 1 && benefittype == 5 && paytype >= 4" type="hidden" :name="'pitems[' + itemNo + '].handselcount'">
    <div class="weui-cell" v-if="settletype == 2">
      <div class="weui-cell__hd"><label class="weui-label">订单数量</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input weight" style="width: 80%;display: inline-block;" v-model="weight" type="number" :name="'pitems[' + itemNo + '].weight'" placeholder="需进行结算的重量">
        <input class="weui-input" style="width: 15%;display: inline-block;" type="text" readonly :name="'pitems[' + itemNo + '].unit'" :value="currProduct.unit || '吨'">
      </div>
    </div>
<!--    <div class="weui-cell" v-if="benifitordeduct == 1 && settletype == 2 && benefittype == 5 && paytype < 4">-->
<!--      <div class="weui-cell__hd"><label class="weui-label">赠送数量</label></div>-->
<!--      <div class="weui-cell__bd">-->
<!--        <input class="weui-input" style="width: 80%;display: inline-block;" type="number" v-model="handselweight" :name="'pitems[' + itemNo + '].handselweight'" placeholder="赠送，不结算">-->
<!--        <input class="weui-input" style="width: 15%;display: inline-block;" type="text" readonly :value="currProduct.unit">-->
<!--      </div>-->
<!--    </div>-->
    <input v-if="benifitordeduct == 1 && settletype == 2 && benefittype == 5 && paytype >= 4" type="hidden" :name="'pitems[' + itemNo + '].handselweight'" v-model="handselweight">
    <div class="weui-cell">
        <div class="weui-cell__bd">
          <textarea class="weui-textarea" :name="'pitems[' + itemNo + '].remark'" placeholder="请输备注内容" rows="2"></textarea>
        </div>
    </div>
  </div>
</template>

<script>
  import 'vue-search-select/dist/VueSearchSelect.css'
  import {ModelListSelect} from 'vue-search-select'
export default {
  name: 'SellformItem',
  data () {
    return {
       productid: '',
      specid: '',
      weight: '',
      commonproducts: [],
      specs: [],
      currProduct: '',
      bigorderVal: 40,
      contractProducts: [],
      contractSpecs: [],
      prices: '',
      price: '',
      orderpack: '',
      handselcount: '',
      handselweight: '',
      currPro: ''
    }
  },
  components: {ModelListSelect},
  props: [
    'itemNo',
    'isLast',
    'departid',
    'products',
    'contract',
    'quitsrtype',
    'benifitordeduct',
    'benefittype',
    'discount',
    'settletype',
    'prodpricestra',
    'currency',
    'orgid',
    'paytype'
  ],
  computed: {
    payUnit: function () {
      return this.settletype == 1 ? '元/件' : '元/吨';
    }
  },
  created() {
    this.getBigorderParam();
    this.getProducts();
  },
  mounted() {
    let that = this;
    $('#formid').on('blur', '.price', function () {
      let cthis = $(this);
      let val = $(this).val();
      if (that.settletype == 1) {
        if (val > 1000) {
          $.confirm('该订单目前按件计价，确认单价是' + val + '元/件？', function () {}, function () {
            cthis.val('');
          });
        }
      } else {
        if (val < 1000) {
          $.confirm('该订单目前按重量计价，确认单价是' + val + '元/吨？', function () {}, function () {
            cthis.val('');
          });
        }
      }
    });
  },
  watch: {
    'productid': function (val) {
      this.getSpecif(val);
      this.$refs.productname.value = $('#product' + this.itemNo).find('option:selected').text();
      this.currProduct = '';

      this.currPro = this.commonproducts.filter(item => {
        return item.productId == val;
      })[0];
    },
    'specid': function (val) {
      this.getPrice();
      if (val != '') {
        this.currProduct = this.specs.filter(function (item) {
          return item.speId == val;
        })[0] || '';
      }
    },
    'departid': async function (val) {
        await this.getProducts();
        this.getSpecif();
    },
    'quitsrtype': function (val) {
        this.getProducts();
        this.getSpecif();
    },
    'contract': function (val) {
      if (val != '') {
        this.getContractPro(val.guid);
      }
      this.currProduct = '';
    },
    'currency': function (val) {
      this.getPrice();
    },
    'settletype': function (val) {
      this.getSpecif();
      this.getPrice();
    },
    orderpack: function (val) {
      let place = String(val).indexOf(".") + 1;
      if (place > 0) {
        this.orderpack = '';
        this.toastText('订单数量不能为小数');
      }
    },
    'handselcount': function (val) {
      let place = String(val).indexOf(".") + 1;
      if (place > 0) {
        this.handselcount = '';
        this.toastText('赠送数量不能为小数');
      }
      // if (parseInt(val) >= parseInt(this.orderpack)) {
      //   this.toastText('赠送件数必须小于订单件数');
      //   this.handselcount = '';
      // }
    },
    'handselweight': function (val) {
      if (parseInt(val) >= parseInt(this.weight)) {
        this.toastText('赠送重量必须小于订单重量');
        this.handselweight = '';
      }
    }
  },
  methods: {
    packUnit: function(unit, currency) {
      return unit != undefined && unit != '' ? currency == 2 ? '美元/' + unit : '元/' + unit : '';
    },
    getBigorderParam: function() {
      this.axios({
        method: 'get',
        url: '/system/Data!getSysParams.action',
        params: {filename: 'saleparams.properties', paramname: 'BigWeight'}
      }).then((response) => {
        if (response.data.code == 1) {
          let data = response.data;
          this.bigorderVal = data.msg;
        }

      })
    },
    getProducts: async function() {
      if (this.quitsrtype == '' || this.orgid == undefined) return;
      let postData = {
          'contractId': this.contract.guid,
          'departId': this.departid,
          'type': this.quitsrtype,
          'orgid': this.orgid,
      };
      await this.axios({
        method: 'get',
        url: '/sales/Products!getProducts.action',
        params: postData
      }).then((response) => {
        if (response.data.msg == 'success') {
          this.commonproducts = response.data.products;
        } else {
          this.toastText('获取产品数据失败')
        }

      })
    },
    getSpecif: function() {
      if (this.productid == '') return;
      this.axios({
        method: 'get',
        url: '/sales/Products!getSpes.action',
        params: {'type': this.quitsrtype, productId: this.productid, contractId: this.contract.guid, departId: this.departid, valuation: this.settletype}
      }).then((response) => {
        if (response.data.msg == 'success') {
          this.specs = response.data.products;
          this.specid = this.specs.length > 0 ? this.specs[0].speId : '';
        } else {
          this.toastText('获取规格数据失败')
        }

      })
    },
    getPrice: function() {
      if (this.specid == '') return;
      this.axios({
        method: 'get',
        url: '/sales/Products!getPrice.action',
        params: {speId: this.specid, contractId: this.contract.guid, currency: this.currency, valuation: this.settletype}
      }).then((response) => {
        if (response.data.msg == 'success') {
          this.prices = response.data.products != undefined ? response.data.products : '';
          this.price = this.prices != '' ? this.prices.price : '';
        } else {
          this.toastText('获取价格数据失败')
        }

      })
    },
    findQty: function() {
      if (this.specid == '') return;
      this.axios({
        method: 'get',
        url: '/harvest/Whinfo!findQty.action',
        params: {spguid: this.specid}
      }).then((response) => {
        if (response.data.msg == 'success') {
          let txt = response.data.whinfo.storeqty == 0 ? '0' : response.data.whinfo.storeqty;
          this.toastText("现有库存：" + txt + "吨")
        }

      })
    },
    getSpecByContractPro: function(productid) {
      this.axios({
        method: 'get',
        url: '/sales/Salecontract!getContractSpe.action',
        params: {contractid: this.contract.guid, pzguid: productid}
      }).then((response) => {
        if (response.data.code == 1) {
          let data = response.data;
          this.specs = data.msg;
          console.log('specs:', this.specs)
        } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
          //不不设置提示
        } else {
          this.toastError("系统错误");
        }

      })
    },
    getContractPro: function(contractid) {
      this.axios({
        methods: 'get',
        url: '/sales/Salecontract!getContractPro.action',
        params: {contractid: contractid}
      }).then((response) => {
        let data = response.data;
        if (data.code == 1) {
          this.contractProducts = data.msg;
        } else {
          this.toastText('获取合同产品失败');
        }
      })
    },
    addItem: function() {
      this.$emit('doAddItem');
    },
    delItem: function() {
      this.$emit('doDelItem');
    }
  }
}
</script>
